<template>
  <q-page style="width: 60%;margin: auto;padding-top:100px;" class="q-mt-lg q-pt-lg" >

    <div class="tw-grid md:tw-grid-cols-3 md:tw-gap-5 tw-grid-cols-1 tw-gap-5">
        <div v-for="(item,idx) in articles" :key="idx" >
          <q-card class="dark:tw-bg-zinc-800 dark:tw-text-white" style="width: 90%;height:20vh;margin: auto">
            <q-card-section style="height: 70%">
              <div class="text-h6">{{ item["title"] }}</div>
              <q-separator class="q-ma-sm dark:tw-bg-zinc-500" />
              <div class="text-subtitle abstract">{{ item["abstract"] }}</div>
            </q-card-section>

            <q-card-actions>
              <q-btn flat @click="openReadPage(idx)">Read</q-btn>
            </q-card-actions>
          </q-card>
      </div>
    </div>

  </q-page>
</template>

<script>
import { api } from "boot/api";
import { ref } from "vue";
import {useRouter} from 'vue-router'
import { useQuasar } from 'quasar'

export default {
  // name: 'PageName',
  setup(){

    const $q = useQuasar()
    let screen = $q.screen

    let articles = ref([])
    let row_num = ref(0)
    let cols = 3;
    const router = useRouter();
    api.get('/articles')
      .then(res=>{
        if(res.status!==200){
          return
        }
        articles.value = res.data
        row_num.value = Math.ceil(articles.value.length / 3)
        sessionStorage.setItem('articles',JSON.stringify(articles.value))
      })
    const openReadPage = (content) => {
        const  res = router.resolve({
          path:`/reading/${content}`,
        })
      window.open(res.href,'_blank')
    }

    return {
      articles,
      row_num,
      cols,
      openReadPage,
      screen
    }
  }
}
</script>
<style scoped>

.abstract{
  height: auto;
  overflow: hidden;
  text-overflow: ellipsis;
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:3;
}
.light{
  background-color: #f5f5f5
}
.dark{
  background-color: #2a2a2a;
}

</style>
